<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <div>
            <button @click='change("step1")'>第一步</button>
            <button @click='change("step2")'>第二步</button>
            <button @click='change("step3")'>第三步</button>
        </div>

        <!-- 动态组件 component 挂载点 多个组件复用 实现切换 -->
        <!-- keep-alive保持活跃 不再销毁组件 -->
        <!-- keepalive可以做性能优化 给服务器减轻压力  -->

        <!-- 缺点  1  无法清除定时器 解决方案 deactivated 新增暂时离开生命周期里面清除  -->

        <keep-alive>
            <component :is='name'></component>
        </keep-alive>


    </div>


    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var step1 = {
            template: '<h1>我是第一个组件  足球新闻 </h1>',
            data: function () {
                return {
                    name: 'helloworld组件'
                }
            },
            created() {
                // alert('页面1用户进来了')
                console.log('我是第一个组件created')
                // 新闻网站 足球新闻  axios  ['国足','英超']
                console.log('组件1 发送足球新闻  axios请求了')
            },
            beforeMount() { console.log('我是第一个组件beforeMount') },
            mounted() { console.log('我是第一个组件mounted') },
            beforeUpdate() { console.log('我是第一个组件beforeUpdate') },
            updated() { console.log('我是第一个组件updated') },
            beforeDestroy() { console.log('我是第一个组件beforeDestroy') },
            destroyed() { console.log('我是第一个组件destroyed') },
            // 用户暂时进来
            activated() {
                alert('页面1用户进来了')
            },
            //  组件暂时离开  
            deactivated() {
                console.log('组件1 deactivated')
            }
        }
        var step2 = {
            template: '<h1>我是第2个组件  篮球新闻</h1>',
            created() {
                // alert('页面2用户进来了')
                console.log('我是第2个组件created')
                console.log('组件2 发送篮球新闻  axios请求了')
            },
            beforeMount() { console.log('我是第2个组件beforeMount') },
            mounted() { console.log('我是第2个组件mounted') },
            beforeUpdate() { console.log('我是第2个组件beforeUpdate') },
            updated() { console.log('我是第2个组件updated') },
            beforeDestroy() { console.log('我是第2个组件beforeDestroy') },
            destroyed() { console.log('我是第2个组件destroyed') },
            // 用户暂时进来
            activated() {
                alert('页面2用户进来了')
            },
            //  组件暂时离开  
            deactivated() {
                console.log('组件2deactivated')
            }
        }
        var step3 = {
            template: '<h1>我是第3个组件  棒球新闻 </h1>',
            created() {
                // alert('页面3用户进来了')
                console.log('我是第3个组件created')
                console.log('组件3 发送棒球新闻  axios请求了')

            },
            beforeMount() { console.log('我是第3个组件beforeMount') },
            mounted() { console.log('我是第3个组件mounted') },
            beforeUpdate() { console.log('我是第3个组件beforeUpdate') },
            updated() { console.log('我是第3个组件updated') },
            beforeDestroy() { console.log('我是第3个组件beforeDestroy') },
            destroyed() { console.log('我是第3个组件destroyed') },
            // 用户暂时进来
            activated() {
                alert('页面3用户进来了')
            },
            //  组件暂时离开  
            deactivated() {
                console.log('组件3 deactivated')
            }
        }



        var vm = new Vue({
            // 监管的容器 
            el: '#app',
            components: {
                step1,
                step2,
                step3
            },
            // 数据定义
            data: {
                name: 'step1'
            },
            methods: {
                change(e) {
                    this.name = e
                }
            }
        })

        console.log('vm', vm)



    </script>
</body>

</html>